<template>
  <view class="br-8 mb-12 bg-white" @click.stop="goDetail">
    <view class="bottom-border pa-12 disFlxJS">
      <view class="flex-1 mr-10 disFlxAC">
        <TImage
          class="flex-shrink-0 mr-4"
          :src="data?.avatar"
          width="48rpx"
          height="48rpx"
          border-radius="50%"
        />
        <text class="fz-12 flex-1 ov-1">
          <text class="font-bold default-color">{{ data?.userName }}</text>
          <text v-if="data?.levelName" class="ml-4 fz-10 jobtitle-tag px-6 py-2 br-2">
            {{ data.levelName }}
          </text>
        </text>
      </view>
      <StatusTag :status="data?.approvalStatus" />
    </view>
    <view class="pa-12">
      <view class="fz-14 color1 mb-12">
        <text>
          申请类型：{{ data?.applyType === MatchApplyTypeEnum.apply ? '申请撮合' : '申请介入' }}
        </text>
      </view>
      <view class="fz-14 color1 mb-12 break-all">
        <text>申请留言：{{ data?.boIntention }}</text>
      </view>
      <view class="fz-14 color1 mb-12">
        <text>申请时间：{{ data?.createTime }}</text>
      </view>
      <view
        class="pa-12 disFlxAC br-8"
        @click.stop="toSupplyDemandDetails"
        style="background-color: #f2f3f5"
      >
        <TImage
          v-if="data?.boType === BoTypeEnum.Supply"
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
          width="40rpx"
          height="40rpx"
        />
        <TImage
          v-else
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
          width="40rpx"
          height="40rpx"
        />
        <text class="fz-14 default-color flex-1 ov-1">{{ data?.title }}</text>
      </view>
    </view>
    <view
      v-if="data?.approvalStatus === MatchApprovalStatusEnum.pending"
      class="disFlxAC top-border pa-12"
    >
      <view class="flex-1"></view>
      <view>
        <TButton
          text="审核"
          type="primary"
          class="gutter-btn"
          custom-class="h-32 linh-32 br-16"
          @click.stop="goDetail"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { IApplyTypeAuditRecordResult } from '@/api/businessOpportunities/type';
  import {
    BoTypeEnum,
    MatchApplyTypeEnum,
    MatchApprovalStatusEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import StatusTag from './StatusTag.vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    data: Object as PropType<IApplyTypeAuditRecordResult>,
  });

  function toSupplyDemandDetails() {
    navigateTo({ name: 'supplyDemandDetails', options: { id: props.data?.boInfoId! } });
  }

  function goDetail() {
    navigateTo({
      name: 'cooperativeAuditDetail',
      options: {
        id: props.data!.id,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .bottom-border {
    border-bottom: 1px solid #ebedf0;
  }

  .top-border {
    border-top: 1px solid #ebedf0;
  }

  .jobtitle-tag {
    color: #ea5e0e;
    background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
  }

  .color1 {
    color: #646566;
  }
</style>
